<template>
    <div class="main">
        <banner></banner>
        <div class="pd20" v-if="queueInfo != null && queueInfo != '' && queueInfo != {}">
            <div class="qrcode">
                <vue-qr class="vue-qr" :text="queueInfo.queueKey" :logoScale="50" :size="300"></vue-qr>
            </div>
            <div class="queueNo" v-text="'排队序号:' + (queueInfo.queueNo ? queueInfo.queueNo : '')"></div>
            <div class="queueStatus" v-text="this.callStatusTxt(queueInfo.call)"></div>
            <div class="queueInfo" v-text="'前面还有' + (queueInfo.forwardTotal ? queueInfo.forwardTotal : '') + '人，你大概还需要等待' + (queueInfo.long ? queueInfo.long : '') + '，请您耐心等待！感谢您的配合！'"></div>
        </div>
        <div v-if="queueInfo == null || queueInfo == {} || queueInfo == false" class="pd20">
            <div class="pd-txt" v-text="'未找到排队信息'"></div>
            <div>
                <mt-button type="primary" size="large" @click.native="goUrl('index')" v-text="'返回首页'"></mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import banner from '../components/banner.vue'
import vueQr from 'vue-qr'
import { MessageBox } from 'mint-ui'
export default {
    name: 'index',

    data () {
        return {
            queueInfo: ''
        }
    },

    mounted() {
        this.myQueue('', '')
    },
    
    methods: {
        callStatusTxt (call) {
            switch(call){
                case 1 : return '等待叫号中…'
                case 2 : return '已经叫号，等待入场…'
                case 3 : return '已过号'
                default: return '未知状态'
            }
        },

        myQueue (call, status) {
            this.getHeaders()
            let ts = this
            let api = this.getApi('myQueue')
            let data = this.getFormData({call: call, status: status})
            this.$ajax({
                method: 'POST',
                url: api,
                data: data,
                headers: this.headers,
            }).then(function(res){
                if(res.data.code == 1){
                    if(res.data.result){
                        ts.queueInfo = res.data.result
                        ts.myQueue(ts.queueInfo.call, ts.queueInfo.status)
                    }else{
                        ts.queueInfo = ''
                    }
                }else{
                    ts.myQueue(ts.queueInfo.call, ts.queueInfo.status)
                }
            }).catch(function(error){
                console.log(error)
            })
        }
    },
    components: {banner, vueQr}
}
</script>